<template>
  <div id="user">
    <div id="main" class="main">
      <div class="main-top">
        <img class="logo" src="https://19jwshow.oss-cn-shenzhen.aliyuncs.com/wdad/logo/LOGO.png" alt="">
        <p class="ceremony">欢迎来到</p>
        <p class="appellation">中山市技师学院世赛集训基地</p>
      </div>
      <div class="form">
        <p class="username">用户名</p>
        <a-input v-model:value="username" placeholder=""/>
        <p class="username">密码</p>
        <a-input-password v-model:value="password" placeholder=""/>
        <p class="check">
          <a-checkbox @click="remember" class="checkbox" v-model:checked="checked">记住我</a-checkbox>
        </p>
        <div class="sign">
          <span class="phone"><router-link to="/login/loginMobile" replace>使用手机号登录</router-link></span>
          <button class="button" @click="submit"><span>登录</span></button>
        </div>
      </div>
      <div class="main-footer">
        <p class="make">网站制作</p>
        <p class="explain">Website Design And Development</p>
        <p class="copy">2021-2022&copy;网站设计与开发项目组</p>
      </div>
    </div>
  </div>
</template>

<script>
import {defineComponent, ref, getCurrentInstance, onMounted} from 'vue'
import {message} from 'ant-design-vue';
import router from "@/router";
import $store from "@/store"

export default defineComponent({
  name: 'loginUser',
  setup() {
    const username = ref('');
    const password = ref('');
    const checked = ref(false);
    const theKey = ref(false);
    let {proxy} = getCurrentInstance();
    //登录事件
    const submit = () => {
      if (username.value == "" || password.value == "") {
        message.warning(
            '用户或密码不能为空:(',
            3,
        );
      } else {
        proxy.$request('post', '/api/v1/login/username', {
          username: username.value,
          password: password.value
        }).then(res => {
          //判断用户是否为第一次登录， 0 为已经登录两次以上，1 为第一次登录用户  2 用户修改密码
          switch (res.data.is_first){
            case "0":
              username.value = '';
              password.value = '';
              proxy.$cookie.setCookie('user', res.data, 7200)
              $store.commit('setTokens', res.data.token);
              proxy.$request('get', '/api/v1/role/route', {}).then(res => {
                    $store.commit("setUserInfo", Object.assign({isLogin: true}, res.data))
                    console.log(res.data)
                    router.push('/home');
                    message.success(
                        '登录成功:)',
                        3,
                    )
                  })
              break;
            case "1":
            case "2":
              username.value = '';
              password.value = '';
              message.warning(
                  '请修改您的密码',
                  3,
              )
              $store.commit('setTokens', res.data.token);
              $store.commit('setUserInfo', res.data.token);
              router.push('/login/loginModifyPass');
              break;
            default:
              message.error(
                  '系统错误, 请重新尝试',
                  3,
              );
              router.push('/login/loginUser');
          }
          //后台判断用户名是否存在
          switch (res.code) {
            case 4006:
              message.error(
                  '请输入正确的用户名和密码',
                  3,
              );
              break;
            case 4004:
              message.error(
                  '系统错误, 请重新尝试',
                  3,
              );
              break;
          }
        })
      }
      console.log('c')
    }

    //回车触发登录事件
    window.onkeydown =(e)=>{
      if(e.code=="Enter" && !theKey.value){
        submit()
        window.onscroll = ''
        theKey.value = true;
      }
    }
    // const remember = () => {
    //   proxy.$cookie.setCookie('userData', $store.state.token, 7200)
    //   console.log($store.state.token)
    // }

    return {
      username,
      password,
      checked,
      submit,
    }
  },

});
</script>

<style lang="less">
#app {
  height: 100%;
}

#user {
  --left: calc(1920px / 48);

  display: flex;

  .main .main-top {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  .main .ceremony {
    width: 100%;
    text-align: center;
    color: #98A6AD;
  }

  .main .appellation {
    width: 100%;
    text-align: center;
    font-weight: bold;
  }


  .main .form p {
    font-weight: bold;
    line-height: 30px;
    font-size: 14px;
    margin: 0;
  }

  .main .form input {
    height: 45px;
    border-radius: 8px;
    margin-bottom: 28px;
  }

  .main .form .ant-input-password {
    border-radius: 8px;
    margin-bottom: 28px;
  }

  .main .form .ant-input-password .ant-input {
    margin: 0;
    height: 35px;
  }

  .main .form .pass .ant-inputt {
    height: 35px;
    margin: 0;
  }

  .main .form .checkbox {
    color: black;
  }

  .main .form .checkbox {
    font-weight: lighter;
    margin-top: 7px;
    display: block;
  }

  .main .form .check {
    height: 30px;
    display: flex;
  }

  .form .sign {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10%;
  }

  .form .sign .phone {
    color: #6777EF;
    font-size: 14px;
  }

  .ant-btn {
    width: 76px;
    height: 44px;
    background: #6777EF;
    box-shadow: 0 2px 6px 1px rgba(182, 191, 255, 0.800000011920929);
    border-radius: 6px 6px 6px 6px;
    opacity: 1;
    border: 1px solid #6777EF;

  }

  .ant-btn:hover {
    background-color: #3C50E1;
  }

  .ant-btn span {
    color: #fff;
  }

  .main-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
  }

  .main-footer p {
    width: 100%;
    text-align: center;
  }
  .main-footer .copy{
    font-weight: lighter;
  }
  .main-footer .make {
    color: #98A6AD;
  }

  .main-footer .explain {
    font-weight: bold;
    line-height: 5px;
  }
}


</style>
